<template>
  <!-- 主体组件 -->
  <div class="banner-list">
    <!-- 轮播图 -->
    <el-carousel indicator-position="outside" height="56vw">
      <el-carousel-item v-for="(item, index) in banner" :key="index">
        <img :src="item.pic" />
      </el-carousel-item>
    </el-carousel>
    <!-- 分类导航栏 -->
    <div class="navList">
      <ul>
        <li v-for="(nav, ins) in navList" :key="ins" @click="cate(nav.idname)">
          <img :src="nav.pic" />
          <span>{{ nav.idname }}</span>
        </li>
      </ul>
    </div>
    <!-- 广告插图 -->
    <div class="imgBox">
      <img src="../assets/TB1lp6wbvWG3KVjSZFPXXXaiXXa-750-240.png" />
    </div>
    <!-- 更多内容（全部内容） -->
    <div class="bossIn">
      <div class="bossIn-top">
        <h2>大咖在Super麦</h2>
        <span>
          查看更多
          <i class="el-icon-arrow-right"></i>
        </span>
      </div>
      <!-- 分类 -->
      <div class="bossIn-btm">
        <ul ref="ulBtm">
          <li v-for="(boss, ins) in bosses" :key="ins" ref="ins">
            <div>
              <img :src="boss.actorImg" alt />
              <h1>
                {{ boss.actorName }}
                <small>{{ Math.floor(boss.fans / 10000) }} 万粉丝</small>
              </h1>
              <span v-if="lov[ins] == false" @click="love(boss.id, ins)"
                >+关注</span
              >
              <span v-else @click="del(boss.id, ins)">已关注</span>
            </div>
            <span>
              最近{{ boss.count }}场演出
              <i class="el-icon-arrow-right"></i>
            </span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 内容主体 -->
    <content-list></content-list>
    <div class="backTop" v-if="scrTop > 777">
      <img @click="top" src="../assets/images/top.gif" />
    </div>
  </div>
</template>

<script>
import ContentList from "./ContentList";
export default {
  data: function () {
    return {
      banner: [],
      navList: [],
      // imgSrc:'',
      bosses: [],
      isFollow: false,
      lov: [false, false, false, false],
      scrTop: 0,
    };
  },
  mounted() {
    $(document).scroll(() => {
      this.scrTop = $(window).scrollTop();
    });
    //轮播图
    this.axios.get("/carousel").then((res) => {
      this.banner = res.data.result;
      this.banner.forEach((ele) => {
        ele.pic = require("../assets" + ele.pic);
      });
    });
    // 获取总分类数据
    this.axios.get("/navlist").then((res) => {
      this.navList = res.data.result;
    });
    // 获取明星大咖数据
    this.axios.get("/boss").then((res1) => {
      for (let i = 0; i < 4; i++) {
        this.axios
          .get("/islove?user=" + this.$store.state.userId + "&actor=" + (i + 1))
          .then((res) => {
            if (res.data.code) {
              this.lov[i] = false;
            } else {
              this.lov[i] = true;
            }
            if (i == 3) {
              this.bosses = res1.data.result;
              this.bosses[0].count = 2;
              this.bosses[1].count = 3;
              this.bosses[2].count = 1;
              this.bosses[3].count = 3;
            }
          });
      }
    });
  },
  components: {
    ContentList,
  },
  methods: {
    top() {
      let i = this.scrTop;
      let aaa = setInterval(() => {
        i -= 100;
        window.scrollTo(0, i);
        if (i <= 30) {
          clearInterval(aaa);
          window.scrollTo(0, 0);
        }
      }, 1);
    },
    //跳转并修改分类的cate值
    cate(val) {
      localStorage.setItem("cate", val);
      location.href = "#/category";
    },
    // 添加关注
    love(val, ins) {
      if (this.$store.state.isOnline) {
        // 用户
        let id1 = this.$store.state.userId;
        // 演员
        let id2 = val;
        this.axios
          .post("/love", "userid=" + id1 + "&actorid=" + id2)
          .then((res) => {
            if (res.data.code == 1) {
              this.$message({
                message: res.data.msg,
                type: "success",
                duration: "1000",
              });
              this.lov[ins] = true;
              this.axios.get("/boss").then((res) => {
                this.bosses = res.data.result;
                this.bosses[0].count = 2;
                this.bosses[1].count = 3;
                this.bosses[2].count = 1;
                this.bosses[3].count = 3;
              });
            }
          });
      } else {
        this.$message({
          message: "你还没有登录",
          type: "error",
        });
      }
    },
    del(val, ins) {
      this.axios
        .post(
          "/dellove",
          "user_id=" + this.$store.state.userId + "&actor_id=" + val
        )
        .then((res) => {
          this.$message({
            message: res.data.msg,
            type: "success",
            duration: "1000",
          });
          this.lov[ins] = false;
          this.axios.get("/boss").then((res) => {
            this.bosses = res.data.result;
            this.bosses[0].count = 2;
            this.bosses[1].count = 3;
            this.bosses[2].count = 1;
            this.bosses[3].count = 3;
          });
        });
    },
  },
};
</script>

<style scoped>
.backTop {
  position: fixed;
  right: 5px;
  bottom: 10px;
}
/* 图片宽度设置 */
.banner-list img {
  z-index: -10;
  width: 100%;
}
/* 修改el组件的高度 */
.banner-list >>> .el-carousel {
  height: 56vw;
}
/* 修改el组件内图片的堆叠顺序 */
.banner-list >>>.el-carousel__item {
  z-index:-2
}
.banner-list >>>.el-carousel__item.is-active {
  z-index:-1;
}
/* 修改el组件中ul的位置 */
.banner-list >>> .el-carousel__indicators--outside {
  position: absolute;
  bottom: 0;
  left: calc(50% - 45px);
}
/* 轮播图小圆点 */
.banner-list >>> .el-carousel__button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 1);
}
/* 分类导航栏 */
.banner-list .navList {
  height: 25vh;
}
.banner-list .navList ul {
  width: 100%;
  padding: 10px 0;
}
/* 每项分类 */
.banner-list .navList ul li {
  display: inline-block;
  width: 25%;
  margin-top: 20px;
}
/* 分类图片 */
.banner-list .navList ul li img {
  width: 30%;
}
.banner-list .navList ul li span {
  display: block;
  font-size: 14px;
}
/* 广告图 */
.banner-list .imgBox {
  height: 13vh;
}
/* 主流大咖 */
.bossIn {
  margin-top: 10vh;
  padding: 0 20px;
  height: 200px;
}
/* 大咖头部 */
.bossIn .bossIn-top {
  display: flex;
  margin-bottom: 10px;
  justify-content: space-between;
}
/* 头部文字 */
.bossIn .bossIn-top h2 {
  text-align: left;
  font-size: 16px;
}
/* 头部其余 */
.bossIn .bossIn-top span {
  text-align: right;
  font-size: 15px;
  color: #999;
}
/* 大咖主体 */
.bossIn .bossIn-btm {
  width: 100%;
  overflow: hidden;
  padding-bottom: 20px;
  overflow-x: scroll;
  position: relative;
  height: 160px;
}

/* 大咖分类总 */
.bossIn .bossIn-btm ul {
  position: absolute;
  overflow: hidden;
  width: 1200px;
  list-style: none;
}
/* 大咖分类分 */
.bossIn .bossIn-btm ul li {
  width: 290px;
  float: left;
  border: 1px solid #eee;
  box-shadow: 0 8px 4px 0 rgba(0, 0, 0, 0.05);
  border-radius: 5px;
  padding: 0 15px;
  margin-right: 10px;
}
/* 余下皆为 大咖分类分-详 */
.bossIn .bossIn-btm ul li div {
  display: flex;
  padding: 20px 0;
}
.bossIn .bossIn-btm ul li div img {
  width: 25%;
  border-radius: 50%;
}
.bossIn .bossIn-btm ul li div h1 {
  font-size: 19px;
  font-weight: normal;
  margin: 15px 0 0 15px;
}
.bossIn .bossIn-btm ul li div h1 small {
  display: block;
  font-size: 12px;
  width: 90px;
  color: #999;
}
.bossIn .bossIn-btm ul li div span {
  margin-top: 15px;
  margin-left: 25px;
  padding: 7px 10px 0 10px;
  border: solid 1px #ff1268;
  height: 35px;
  border-radius: 20px;
  color: #ff1268;
  font-size: 13px;
}
.bossIn .bossIn-btm ul li > span {
  display: block;
  border-top: solid 1px #eee;
  padding: 10px 0;
  text-align: left;
  font-size: 15px;
}
.bossIn .bossIn-btm ul li > span i {
  margin-left: 60%;
}
</style>